<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
    <select name="" id=""></select>
    <select name="" id=""></select>
    <script src="./area.js"></script>
    <script>
        // console.log(place.data);
        // var data = [{provname:"",city:[]},{provname:"",city:[]},{provname:"",city:[]},{}]
        // var city = [{cityname:""},{cityname:""},{cityname:""}]
        // var d = ["","",""]
        var se = document.querySelectorAll("select");

        // 获取数据渲染页面

        // 0.将 数据中 的所有 省份 获取 渲染 给第一个select标签
        var str = "";
        // 1.先获取place.data这个数组
        // 2.循环这个数组 ,得到数组的的所有对象(因为想要的值在每个对象里)
        place.data.forEach(item => {
            // 3.通过每个对象获取到每个省份的值
            // console.log(item.provname);
            // 4.分析渲染在页面上时,是否需要添加标签结构 (当前需要option标签包裹内容)
            // 进行字符串拼接 得到每个加了标签的省份
            str += `<option value="">${item.provname}</option>`;

        });
        // 5.在循环结束后,得到省份加标签的值
        // console.log(str);
        // 6.进行渲染
        se[0].innerHTML = str;

        se[0].onchange = function () {
            shi()
        }
        se[1].onchange = function () {
            qu()
        }

        function shi() {
            var n = se[0].selectedIndex;
            var city = place.data[n].city;
            console.log(city);
            var str = "";
            city.forEach(item => {
                str += `<option value="">${item.cityname}</option>`;
            });
            se[1].innerHTML = str;
            qu()
        }
        shi()

        function qu(){
            var city = [{cityname:"",dist:[]},{cityname:""},{cityname:""}]
            var n = se[0].selectedIndex;
            var m = se[1].selectedIndex;
            var dist = place.data[n].city[m].dist;
            console.log(dist); //["","",""]
            var str = "";
            dist.forEach(item => {
                str += `<option value="">${item}</option>`;
            });
            se[2].innerHTML = str;
        }




        // chengshi
        // 获取第n个省份所对应的城市的数组
        // 第一个下拉框选中的option的索引值 默认0
        // place.data[n].city = [{cityname:""},{cityname:""},{cityname:""}]
        // selectedIndex获取当前下拉框对象内选中option的索引值
        // var n = se[0].selectedIndex;
        // var city = place.data[n].city;
        // console.log(city);
        // var str = "";
        // city.forEach(item => {
        //     str += `<option value="">${item.cityname}</option>`;
        // });
        // se[1].innerHTML = str;




        // qu
        // var city = [{cityname:"",dist:[]},{cityname:""},{cityname:""}]
        // var n = se[0].selectedIndex;
        // var m = se[1].selectedIndex;
        // var dist = place.data[n].city[m].dist;
        // console.log(dist); //["","",""]
        // var str = "";
        // dist.forEach(item => {
        //     str += `<option value="">${item}</option>`;
        // });
        // se[2].innerHTML = str;
    </script>
</body>

</html>